<template>
  <div class="home">
    <PageHeader></PageHeader>
    <div class="homeContent">
      <div style=" width: 300px;" class="homeTabs">
        <ul>
          <li>监督建议</li>
        </ul>
      </div>
      <div class="homeBrief">
        <el-form ref="ruleFormRef" :rules="rules" label-position="top" :model="Params" style="width:50%;margin:0 auto;">
          <el-form-item label="标题：" prop="title">
            <el-input v-model="Params.title" placeholder="请输入标题" clearable />
          </el-form-item>
          <el-form-item label="用户名：" prop="authorname">
            <el-input v-model="Params.authorname" placeholder="请输入用户名" clearable />
          </el-form-item>
          <el-form-item label="联系方式：" prop="contactinfo">
            <el-input v-model="Params.contactinfo" placeholder="请输入联系方式" clearable />
          </el-form-item>
          <el-form-item label="建议：" prop="content">
            <el-input v-model="Params.content" placeholder="请输入建议" type="textarea" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">
              提交
            </el-button>
            <el-button @click="clear()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup name='SupervisionSuggestions'>
import PageHeader from '../components/PageHeader.vue'
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus'
import { addCustomermessage } from '@/api/common'
const ruleFormRef = ref(null);
const Params = ref({})
const rules = reactive({
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' },
  ],
})
const fileList = ref([])
const submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      addCustomermessage(Params.value).then((res) => {
        if (res.data.code == '200') {
          ElMessage({
            message: '操作成功',
            type: 'success',
          })
          clear()
        } else {
          ElMessage({
            error: '操作失败',
            type: 'success',
          })
        }
      })
    } else {
      return false;
    }
  })
}
const clear = () => {
  Params.value = {}
  fileList.value = []
}
</script>

<style lang="scss" scoped>
.home {
  margin: 0 auto;
  width: 85%;
  min-height: calc(100vh - 521px);

  .homeContent {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .homeTabs {
      ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          height: 60px;
          line-height: 60px;
          text-align: center;
          cursor: pointer;
          font-size: 16px;
          background-image: url(../assets/tab.jpg);
          background-repeat: no-repeat;
          color: #fff;
          font-weight: bolder;
          background-size: 100% 60px;
        }
      }
    }

    .homeBrief {
      flex: 1;
      overflow: hidden;

      :deep .el-textarea__inner {
        min-height: 300px !important;
      }

      :deep .el-input__inner {
        min-height: 40px;
      }

      :deep .el-form-item__label {
        font-size: 14px;
      }

      :deep .el-form-item:last-child .el-form-item__content {
        justify-content: center
      }
    }

    .upload-demo {
      width: 100%;
      text-align: left;
    }
  }
}
</style>